<template>
  <div class="overview-content">
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24" style="margin-bottom:20px;">
        <div class="chart-wrapper">
          <slot name="title" />
          <el-form
            ref="form"
            :model="sizeForm"
            label-width="100px"
            class="formDiv"
          >
            <slot />
            <slot name="footer">
              <div class="dialog-footer">
                <el-button
                  :disabled="disabled"
                  :type="disabled ? 'info' : 'primary'"
                  @click="next"
                >
                  下一步
                </el-button>
                <el-button type="primary" @click="jump">跳过此步</el-button>
              </div>
            </slot>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    obj: {
      type: Object,
      default: () => {}
    },
    disabled: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      sizeForm: {},
      props: {
        tableConfig: {
          type: Object,
          required: true,
          default: () => {}
        },
        tableData: {
          type: Array,
          required: true,
          default: () => []
        }
      }
    }
  },
  methods: {
    next() {
      this.$emit('next', false)
    },
    jump() {
      this.$emit('jump', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.formDiv {
  padding-left: 39px;
  padding-right: 39px;
  background: #fff;
  padding-top: 20px;
  padding-bottom: 20px;
}
.dialog-footer {
  text-align: right;
}
</style>
